<template>
	<ul>
		<li :style="{opacity}">欢迎学习Vue</li>
		<li>news001<input type="text"></li>
		<li>news002<input type="text"></li>
		<li>news003<input type="text"></li>
	</ul>
</template>

<script>
	export default {
		name:'News',
		data(){
			return{
				opacity:1
			};
		},
		// beforeDestroy(){
		// 	console.log('News组件即将被销毁')
		// 	clearInterval(this.timer)
		// },
		// mounted() {
		// 	this.timer = setInterval(() => {
		// 		// console.log('1')
		// 		this.opacity -= 0.01
		// 		if(this.opacity <= 0 ) this.opacity = 1
		// 	},16)
		// },
		
		// 路由组件独有的生命周期钩子
		// activated 路由组件被激活时触发
		activated() {
			console.info('News组件被激活了')
			this.timer = setInterval(() => {
				console.log('1')
				this.opacity -= 0.01
				if(this.opacity <= 0 ) this.opacity = 1
			},16)
		},
		// deactivated 路由组件失活时触发
		deactivated() {
			console.info('News组件被失活了')
			clearInterval(this.timer)
		}
	}
</script>

<style>
</style>
